<template>
  <view class="contacts">
    <!-- 基础用法 -->
    <view class="AtIndexes-list">
      <AtIndexes :list="mockData" topKey="" :onClick="onClick" :onScrollIntoView="handleScroll">
        <view class="custom-area">
          <AtSearchBar :value="search" :onChange="handleChange" placeholder="搜索联系人"
            :onActionClick="handleActionClick" />
        </view>
      </AtIndexes>
    </view>
    <Tabbar></Tabbar>
  </view>
</template>

<script>
  import './index.less'
  import Tabbar from '@/components/TabBar.vue'
  import {
    AtSearchBar,
    AtIndexes,
    AtButton
  } from 'taro-ui-vue'
  import {
    ref
  } from 'vue'
  export default {
    name: 'Index',
    setup() {
      // 搜索框
      const search = ref('')
      const scrollToView = ref()
      //列表展示
      const mockData = [{
          title: 'A',
          key: '',
          items: [{
              name: '啊大'
            },
            {
              name: '啊二'
            },
            {
              name: '阿三'
            }, {
              name: '啊大'
            },
            {
              name: '啊二'
            },
            {
              name: '阿三'
            }, {
              name: '啊大'
            },
            {
              name: '啊二'
            },
            {
              name: '阿三'
            }, {
              name: '啊大'
            },
            {
              name: '啊二'
            },
            {
              name: '阿三'
            }, {
              name: '啊大'
            },
            {
              name: '啊二'
            },
            {
              name: '阿三'
            },
          ]
        },
        {
          title: 'B',
          key: '',
          items: [{
              name: 'B啊大',
              id: 1,
            },
            {
              name: 'B啊二',
              id: 2,
            },
            {
              name: 'B阿三',
              id: 3,
            },
          ]
        },
                {
          title: 'C',
          key: '',
          items: [{
              name: 'c1',
              id: 1,
            },
            {
              name: 'c2',
              id: 2,
            },
            {
              name: 'c3',
              id: 3,
            },
          ]
        },
      ]
      //点击列表内容 触发事件
      const onClick = (res) => {
        console.log(res, '---res')
      }

      //搜索框发生改变
      const handleChange = (val) => {
        search.value = val
      }

      //点击搜索 跳转到指定key
      const handleActionClick = () => {
        console.log(search.value, 'search')
        if (!search.value) {
          return
        }
        scrollToView.value && scrollToView.value(search.value.toUpperCase())
        search.value = ''
      }

      //绑定滚动条事件
      const handleScroll = (fn) => {
        scrollToView.value = fn
      }

      return {
        search,
        scrollToView,

        mockData,
        onClick,
        handleChange,
        handleActionClick,
        handleScroll
      }
    },
    components: {
      Tabbar,
      AtSearchBar,
      AtIndexes
    }
  }

</script>
